<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="styles/icon/iconfont.css"/>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>

<body>
<div id="app">


    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>博客管理</template>
                    <el-menu-item-group>
                        <template slot="title">博客分类管理</template>
                        <el-menu-item index="2-1">分类列表</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="博客管理">
                        <el-menu-item index="2-3">博客列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item >新增</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>


                <el-dialog
                        title="新增分类"
                        :visible.sync="dialogVisible"
                        width="30%"
                >
                    <el-form>
                        <el-form-item label="分类名称">
                            <el-input v-model="name" placeholder="分类名称不能超过20个字"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </span>
                </el-dialog>

                <!--修改-->
                <el-dialog
                        title="修改分类"
                        :visible.sync="dialogVisible2"
                        width="30%"
                >
                    <el-form>
                        <el-form-item label="分类名称">
                            <el-input v-model="name" placeholder="分类名称不能超过20个字"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="myUpdate">确 定</el-button>
  </span>
                </el-dialog>
                <el-row>
                    <el-button type="success" @click="dialogVisible = true,name=''" >新增</el-button>
                </el-row>

                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="categoryId"
                            label="id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="categoryName"
                            label="分类名"
                            width="180">
                    </el-table-column>

                    <el-table-column label="操作">

                        <!--                        修改 删除按钮-->
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle
                                       @click="edit(scope.row.categoryId)">
                            </el-button>
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="del(scope.row.categoryId)">
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>

</body>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="api/category.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                dialogVisible: false,
                dialogVisible2: false,
                name: '',
                id: '-1',
            }
        },
        mounted() {
            getAllCategories().then(res => {
                console.log(res)
                //如果请求成功数据更新一下
                if (res.data.flag) {
                    //拿后端返回的数据来更新上面的tableData
                    this.tableData = res.data.data
                }
            })
        },

        methods: {
            add() {
                if (this.id != '-1') {
                    //走更新
                    this.myUpdate()
                }
                console.log(新增)
                addCategories({"categoryName": this.name}).then(res => {
                    console.log(res)
                    if (res.data.flag) {
                        //关闭窗口
                        this.dialogVisible = false
                        //刷新页面
                        getAllCategories().then(res => {
                            console.log(res)
                            if (res.data.flag) {
                                //拿后端返回的数据来更新上面的tableData
                                this.tableData = res.data.data

                            }
                        })
                    }
                })
            },
            edit(id) {
                console.log("id=" + id)
                //请求数据
                this.id = id;
                findCategoriesById(this.id).then(res => {
                    if (res.data.flag) {
                        //绑定数据
                        this.name = res.data.data.categoryName
                        this.id = res.data.data.categoryId
                    }
                    console.log(res)
                })
                //显示弹窗
                this.dialogVisible2 = true

            },

            myUpdate() {
                console.log("更新" + this.id)

                console.log("更新了")
                //实现更新
                updateCategories({"categoryName": this.name, "categoryId": this.id}).then(res => {
                    console.log(res)
                    if (res.data.flag) {
                        //隐藏弹窗
                        this.dialogVisible2 = false
                        //刷新页面
                        getAllCategories().then(res => {
                            console.log(res)
                            if (res.data.flag) {
                                //拿后端返回的数据来更新上面的tableData
                                this.tableData = res.data.data

                            }
                        })
                    }
                })
            },
            del(id) {

                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {


                    deleteCategories(id).then(res => {
                        if (res.data.flag) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!',

                            });
                        }
                        console.log(res)
                        //刷新页面
                        getAllCategories().then(res => {
                            console.log(res)
                            if (res.data.flag) {
                                //拿后端返回的数据来更新上面的tableData
                                this.tableData = res.data.data

                            }
                        })

                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }
        }
    })
</script>

</html>